<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>select 多选和无限级联动 selectN,selectM - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="selectM.js 多选插件
selectN.js 无限级插件（json数据与layui-tree结构一致）"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>select 多选和无限级联动</a> <span class="layui-badge layui-bg-green layui-hide-xs">selectN,selectM</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/3001992/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">番茄</cite> <img src="/crop.49.48.124.124.180/719deedejw8f7e6dnvx0ej2068066jrj.jpg" alt="番茄"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>selectM.js 多选插件 selectN.js 无限级插件（json数据与layui-tree结构一致）</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">创建：2018-9-17 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="http://moretop.gitee.io/layui-select-ext/" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <img src="/upload/2018_5/3001992_1526129899613_66489.gif"> 
       <br>
       <br>
       <div class="layui-elem-quote">
         实现动态设置选中值 set方法
        <br>实现自定义提示文字
        <br>实现ajax方式获取候选数据
        <br>实现禁用某些选项（基于候选数据，status=0）
        <br>实现设置下拉框宽度
        <br>实现选项搜索（仅支持无限级）
        <br>实现表单验证 lay-verify
        <br>实现自定义候选数据键名
        <br>重置（reset）恢复改为用set方法
       </div>HTML元素
       <br>
       <pre>	&lt;form class="layui-form" method="post"&gt;<br><br>	  &lt;div class="layui-form-item"&gt;<br>			&lt;label class="layui-form-label"&gt;多级1&lt;/label&gt;<br>			&lt;div id="cat_ids1"&gt;			<br>      &lt;/div&gt;<br>	  &lt;/div&gt;<br>	  &lt;div class="layui-form-item"&gt;<br>			&lt;label class="layui-form-label"&gt;多级2&lt;/label&gt;<br>			&lt;div id="cat_ids2"&gt;			<br>      &lt;/div&gt;<br>	  &lt;/div&gt; <br>	  &lt;div class="layui-form-item"&gt;<br>			&lt;label class="layui-form-label"&gt;多选1&lt;/label&gt;<br>			&lt;div class="layui-input-block" id="tag_ids1"&gt;<br>   <br>      &lt;/div&gt;<br>	  &lt;/div&gt;<br>	  &lt;div class="layui-form-item"&gt;<br>			&lt;label class="layui-form-label"&gt;多选2&lt;/label&gt;<br>			&lt;div class="layui-input-block" id="tag_ids2"&gt;<br>  <br>      &lt;/div&gt;<br>	  &lt;/div&gt;          <br><br>	  &lt;div class="layui-form-item" style="text-align:center;"&gt;<br>		&lt;div class="layui-input-block"&gt;<br>		  &lt;button type="button" class="layui-btn" lay-submit="" lay-filter="demo"&gt;console.log&lt;/button&gt;<br>	        &lt;/div&gt; <br>	  &lt;/div&gt;<br>	&lt;/form&gt;<br>  <br><br>  <br>  <br>  &lt;div id="btn-wrap"&gt;<br>    &lt;button type="button" class="layui-btn set1"&gt;设置多级1&lt;/button&gt;<br>    &lt;button type="button" class="layui-btn set2"&gt;设置多选1&lt;/button&gt;<br>  &lt;/div&gt;</pre>js使用
       <br>
       <pre>&lt;script charset="UTF-8" src="./layui/layui.js"&gt;&lt;/script&gt; <br>&lt;script&gt;<br><br>  var tagData = [{"id":12,"name":"长者","status":0},{"id":13,"name":"工厂"},{"id":14,"name":"小学生"},{"id":15,"name":"大学生"},{"id":16,"name":"研究生"},{"id":17,"name":"教师"},{"id":18,"name":"记者"}];    <br>  var catData = [{"id":1,"name":"周边旅游","children":[{"id":24,"name":"广东","status":0,"children":[{"id":7,"name":"广州"},{"id":23,"name":"潮州"}]}]},{"id":5,"name":"国内旅游","children":[{"id":8,"name":"华北地区","children":[{"id":9,"name":"北京"}]}]},{"id":6,"name":"出境旅游","children":[{"id":10,"name":"东南亚","children":[{"id":11,"name":"马来西亚","children":[{"id":20,"name":"沙巴","children":[{"id":21,"name":"美人鱼岛","children":[{"id":22,"name":"潜水"}]}]}]}]}]}];<br><br>  layui.config({<br>    base : './'<br>  }).extend({<br>    selectN: './layui_extends/selectN',<br>    selectM: './layui_extends/selectM',<br>  }).use(['layer','form','jquery','selectN','selectM'],function(){<br>    $ = layui.jquery;	<br>    var form = layui.form<br>    ,selectN = layui.selectN<br>    ,selectM = layui.selectM;<br><br><br>    //无限级分类-基本配置<br>    var catIns1 = selectN({<br>      //元素容器【必填】<br>      elem: '#cat_ids1'<br>      ,search:[false,true]<br>      //候选数据【必填】<br>      ,data: catData<br>    });     <br>         <br><br>    //无限级分类-所有配置<br>    var catIns2 = selectN({<br>      //元素容器【必填】<br>      elem: '#cat_ids2'<br>      //候选数据【必填】<br>      ,data: catData <br>      //设置了长度<br>      ,width:null<br>      //默认值<br>      ,selected: [6,10,11] <br>      <br>      //为真只取最后一个值<br>      ,last:true       <br>  <br>			//空值项提示，可设置为数组['请选择省','请选择市','请选择县']<br>			,tips: '请选择'<br><br>			//事件过滤器，lay-filter名 不设置与选择器相同(去#.)<br>			,filter: ''<br><br>			//input的name 不设置与选择器相同(去#.)<br>			,name: 'cat2'<br>			<br>			//数据分隔符<br>			,delimiter: ','<br>			<br>			//数据的键名<br>			,field:{idName:'id',titleName:'name',childName:'children'}<br>			<br>			//表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值 <br>			,formFilter: null      <br>      <br>    }); <br><br>         <br>    //多选标签-基本配置<br>    var tagIns1 = selectM({<br>      //元素容器【必填】<br>      elem: '#tag_ids1'<br>      //候选数据【必填】<br>      ,data: tagData<br>      ,max:2<br>      ,width:400<br>      //添加验证<br>      ,verify:'required'      <br>    }); <br>    <br><br>    //多选标签-所有配置<br>    var tagIns2 = selectM({<br>      //元素容器【必填】<br>      elem: '#tag_ids2'<br>      <br>      //候选数据【必填】<br>      ,data: tagData<br>      <br>      //默认值<br>      ,selected: [12,17] 			<br>      <br>      //最多选中个数，默认5<br>			,max : 6<br>      <br>			//input的name 不设置与选择器相同(去#.)<br>			,name: 'tag2'<br>			<br>			//值的分隔符<br>			,delimiter: ','<br>      <br>			//候选项数据的键名<br>			,field: {idName:'id',titleName:'name'}<br>      <br>      <br>    });<br><br>			<br>    form.on('submit(demo)',function(data){			<br>      console.log('catIns1 当前选中的值名：',catIns1.selected);<br>      console.log('catIns1 当前选中的值：',catIns1.values);<br>      console.log('catIns1 当前选中的名：',catIns1.names);<br>      console.log('catIns1 当前最后一个选中值：',catIns1.lastValue);<br>      console.log('catIns1 当前最后一个选中名：',catIns1.lastName);<br>      console.log('catIns1 当前最后一个是否已选：',catIns1.isSelected);<br>      console.log('');<br><br>      <br>      console.log('tagIns1 当前选中的值名：',tagIns1.selected);<br>      console.log('tagIns1 当前选中的值：',tagIns1.values);<br>      console.log('tagIns1 当前选中的名：',tagIns1.names);      <br>      <br>      console.log('');<br>      <br>      var formData = data.field;<br>      console.log('表单对象：',formData);<br>    })<br>     <br>		//通过js动态选择<br>    $('.set1').click(function(){<br>      catIns1.set([6,10]);<br>      <br>    });<br>		//通过js动态选择<br>    $('.set2').click(function(){<br>      tagIns1.set([12,13,14,15]);<br>    });<br>  });<br>      <br> <br><br>    <br>&lt;/script&gt;</pre> <a href="http://moretop.gitee.io/layui-select-ext/" target="_blank" rel="nofollow">详情请看演示</a> 
       <br>
       <br>所有配置参数
       <br>
       <img src="/upload/2018_5/3001992_1527331301095_64594.png"> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/3001992_1536851506551_44088.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://gitee.com/moretop/layui-select-ext" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>